<template>
  <div>
    <van-form @submit="login" :show-error="false">
      <van-field v-model="form.mobile" type="tel" label="手机号码" placeholder="请输入手机号码" required :rules="rules.mobile" />
      <van-field v-model="form.password" type="password" label="登录密码" placeholder="请输入登录密码" required :rules="rules.password" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" color="#ff6040">登录</van-button>
        <!-- <van-button round block type="info" native-type="submit" @click="onSubmit" color="#ff6040">登录</van-button> -->
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { loginAPI } from '@/api/userAPI'
import { mapMutations } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      form: {
        mobile: '',
        password: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请填写您的手机号', trigger: 'onBlur' },
          { pattern: /^1\d{10}$/, message: '请填写正确的手机号', trigger: 'onBlur' }
        ],
        password: [{ required: true, message: '请输入登录密码', trigger: 'onBlur' }]
      }
    }
  },
  methods: {
    ...mapMutations(['updateTokenInfo']),
    async login() {
      // 只有当表单数据校验通过之后，才会调用此 login 函数
      // const { data: res } = await loginAPI(this.form)
      const res = {
        message: 'OK',
        token: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo'
      }
      // 当数据请求成功之后，res.data 中存储的就是服务器响应回来的数据
      if (res.message === 'OK') {
        // 把登录成功的结果，存储到 vuex 中
        this.updateTokenInfo(res.token)
        // 登录成功后，跳转到主页
        this.$router.push('/home')
      }
    }
    // onSubmit() {
    //   if (this.form.mobile == '12345678910' && this.form.password == '123456') {
    //     Toast.success('登录成功')
    //     this.$notify({
    //       type: 'success',
    //       message: '登录成功，3s后返回登录',
    //       color:'#fff',
    //       background:'#ff6040',
    //       duration: 3000
    //     })
    //     setTimeout(() => {
    //       sessionStorage.clear('regis')
    //       this.$router.go(-1)
    //     }, 3000)
    //   } else if (this.form.mobile == '' && this.form.password == '') {
    //     Toast('请输入账号或密码')
    //   } else {
    //     Toast.fail('账号或密码错误')
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.van-image {
  padding: 0 3rem;
}
/deep/.van-form .van-cell:nth-child(2) {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>
